<template>
  <div class="merchant-register">
    <header>
      <p>商家入驻登记</p>
    </header>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="merchantName">商家名称：</label>
        <input type="text" id="merchantName" v-model="form.businessName" required>
      </div>
      <div class="form-group">
        <label for="address">地址：</label>
        <input type="text" id="address" v-model="form.businessAddress" required>
      </div>
      <div class="form-group">
        <label for="businessExplain">商家介绍：</label>
        <input type="text" id="businessExplain" v-model="form.businessExplain" required>
      </div>
      <div class="form-group">
        <label for="businessImg">商家图片（可选）：</label>
        <input type="file" id="businessImg" @change="onFileChange" accept="image/*">
      </div>
      <div class="form-group">
        <label for="starPrice">起送价：</label>
        <input type="number" step="0.01" id="starPrice" v-model="form.starPrice" required>
      </div>
      <div class="form-group">
        <label for="deliveryPrice">配送费：</label>
        <input type="number" step="0.01" id="deliveryPrice" v-model="form.deliveryPrice" required>
      </div>
      <div class="form-group">
        <label for="remarks">备注：</label>
        <input type="text" id="remarks" v-model="form.remarks">
      </div>
      <div class="form-group">
        <button type="submit">提交入驻申请</button>
      </div>
    </form>
  </div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';

export default {
  name: 'MerchantRegister',
  data() {
    return {
      form: {
        businessName: '',
        businessAddress: '',
        businessExplain: '',
        businessImg: '',  // 默认为空，图片为可选
        starPrice: 0,
        deliveryPrice: 0,
        remarks: ''
      },
      selectedFile: null,  // 用于存储图片文件
    };
  },
  methods: {
    // 处理文件选择
    onFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        // 将图片文件转成 base64，或者直接将 file 对象传递给后端
        const reader = new FileReader();
        reader.onload = (e) => {
          this.form.businessImg = e.target.result; // base64 数据或直接传递 file 对象
        };
        reader.readAsDataURL(file);
      } else {
        this.form.businessImg = ''; // 未上传图片时为空
      }
    },
    // 提交表单
    submitForm() {
      const userId = this.$getSessionStorage('user').userId;  // 获取当前登录用户ID

      axios.post('/MerchantController/register', qs.stringify({
        ...this.form,
        userId: userId,
        orderTypeId: 1,  // 默认设置为 1
      }))
          .then(response => {
            alert('入驻申请提交成功！');
            this.$router.push({ path: '/information' });
          })
          .catch(error => {
            console.error(error);
            alert('入驻申请提交失败，请重试。');
          });
    }
  }
}
</script>

<style>
.merchant-register header {
  width: 100%;
  padding: 10px;
  background-color: #0097FF;
  color: #fff;
  text-align: center;
}

.merchant-register .form-group {
  margin: 20px 0;
}

.merchant-register label {
  display: block;
  margin-bottom: 5px;
}

.merchant-register input[type="text"],
.merchant-register input[type="number"],
.merchant-register input[type="file"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.merchant-register button {
  width: 100%;
  padding: 10px;
  background-color: #FF9800;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.merchant-register button:hover {
  background-color: #e68a00;
}
</style>
